<template>
  <el-tooltip :effect="effect" :content="showContent" :placement="placement" v-bind="$attrs" v-on="$listeners">
    <slot slot="content" name="content" v-bind="$attrs" v-on="$listeners" />
    <slot />
  </el-tooltip>
</template>

<script>
export default {
  name: 'MyTooltip',
  props: {
    effect: { type: String, default: 'dark', validator: (val) => ['dark', 'light'].indexOf(val) !== -1 },
    content: { type: String, default: '' },
    placement: { type: String, default: 'top',
      validator: (val) => ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'].indexOf(val) !== -1
    }
  },
  computed: {
    showContent() {
      if (this.$slots.content) return null
      return this.content || this.placement
    }
  },
  mounted() {
  }
}
</script>

<style>

</style>
